<template>
	
	<view>
		<view class="association-item" v-for="(item, i) in associationActiveList" :key="i">
			<view style="height: 10px;background-color: #efefef;"></view>
			<view class="association-title"  >
				<!-- 微信头像 放左面-->
				<view class="association-title-left">
					<image class="association-title-img" :src="userinfo.avatarUrl || defaultPic" ></image>
				</view>
				<!-- 名称和时间放面-->
				<view class="association-title-right">
					<view class="association-title-name">{{item.associationName}}</view>
				</view>
				
			</view>
			<view class="association-info">
				<!-- 图片 -->
				<view class="association-info-img">

					<image class="association-img-item-background" src="/static/dazi/jiandanBoard.png" ></image>				
					<image class="association-img-item"  :src="item.activityImg.split(',')[0] ||defaultPic" @click="previewInfo(i,i2)" ></image>
				</view>
				<!-- 活动内容，包括名称，地点、活动时间 -->
				<view class="association-info-content">
					<image class="association-content-item-background" src="/static/dazi/jiandan.png" ></image>	
					<view class="association-info-content-right">
						<view class="association-info-title">{{item.activityTitle}}</view>
						<view class="association-info-place">
						<uni-icons custom-prefix="iconfont" type="icon-dingwei" size="20"></uni-icons>
						  {{item.activityPlace}}</view>
						
						<view class="association-info-time" v-if="item.activityBeginTime==item.activityEndTime">
						<uni-icons custom-prefix="iconfont" type="icon-shizhong" size="16"></uni-icons>
						{{item.activityBeginTime.split('-')[1]}}-{{item.activityBeginTime.split('-')[2]}}</view>
						<view class="association-info-time" v-else>
						<uni-icons custom-prefix="iconfont" type="icon-shizhong" size="16"></uni-icons>
						{{item.activityBeginTime.split('-')[1]}}-{{item.activityBeginTime.split('-')[2]}} 到 {{item.activityEndTime.split('-')[1]}}-{{item.activityEndTime.split('-')[2]}}</view>
					</view>
					
				</view>
			</view>
			<view class="association-dazi">
				<view class="association-dazi-review-info">
					已收到{{item.activityHasApplicationNum}}人Da
				</view>
				<view class="association-dazi-apply">
					Da
				</view>
			</view>
		</view>
		<view class="publish_activities">
			<uni-icons custom-prefix="iconfont" type="icon-qingzhu" color="red" size="20"></uni-icons>
			发布活动
		</view>
	</view>
</template>

<script>
	import { mapState} from 'vuex'
	export default {
		data() {
			return {
				associationActiveList:[],
				activeData: [],
				// 请求活动参数对象
				queryActiveObj: {
					// 1-活动 2-比赛 3-搭子
					activityType: 1,
					// 页码值
					pageNo: 1,
					// 每页显示多少条数据
					pageSize: 10,
				},
				isloadingActive: false,
				associationActiveNum: 0,
				defaultPic:
				'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
				
			};
		},
		computed: {
		  ...mapState('m_user', ['userinfo']),
		  ...mapState('m_user', ['userId']),
			//学校id
		  ...mapState('m_dept', ['deptId'])
		},
		onLoad(options) {
			
			// //得到的发布的所有搭子
			this.getAssociationActiveList()
			
		},
		methods: {
			//获取活动
			async getAssociationActiveList() {
				// ** 打开节流阀
				this.isloadingActive = true
				await uni.request({
					url: uni.$http.baseUrl+'/api/activity/getActivityList',
					data: {
						deptId: this.deptId,
						status:'99',
						activityType: this.queryActiveObj.activityType,
					    // 页码值
					    pageNo: this.queryActiveObj.pageNo,
					    // 每页显示多少条数据
					    pageSize: this.queryActiveObj.pageSize,
					},
					method: 'POST',
					header: {
						//"Content-Type": "application/json",
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						this.activeData=res.data
						this.associationActiveList=[...this.associationActiveList, ...this.activeData.data] 
						this.associationActiveNum = this.activeData.data.length
						console.log(this.associationActiveList)
					},
					fail: (res) =>{
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				});
			 },
		}
	}
</script>

<style lang="scss">
@import "@/static/iconfont.css";
.association-title{
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: white;
	display: flex;
	.association-title-left{
		padding-left: 10px;
		width: 10%;
		.association-title-img{
			width: 30px; /* 宽度应该和高度相同 */
			height: 30px;
			border-radius: 50%; /* 圆形效果 */
		}
	}
	.association-title-right{
		width: 70%;
		.association-title-name{
			padding-left: 20px;
			font-size: 16px;
		}
		.association-title-time{
			font-size: 10px;
			font-weight: 300px;
			color: #d0d0d0;
		}
	}
	.association-title-right-icon{
		background-color: aqua;
		width: 10%;
	}
}
.association-info{
	background-color: white;
	display: flex;
	
	.association-info-content{
		position: relative;
		width: 70%;
		.association-content-item-background{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1; /* 设置为较小的z-index值，确保在下层 */
		}
		.association-info-title{
			 padding-left: 20px;
			 padding-right: 10px;
			 margin-bottom: 10px;
			font-size: 18px;
			width: 100%;
			height: 100%;
			position: absolute;
			 top: 23px; /* 根据需要设置上层图片的top值 */
			 left: 15px; /* 根据需要设置上层图片的left值 */
			z-index: 2; /* 设置为较大的z-index值，确保在上层 */
		}
		.association-info-place{
			padding-left: 20px;
			 padding-right: 10px;
			 margin-bottom: 10px;
			font-size: 14px;
			width: 100%;
			height: 100%;
			position: absolute;
			 top: 55px; /* 根据需要设置上层图片的top值 */
			 left: 15px; /* 根据需要设置上层图片的left值 */
			z-index: 2; /* 设置为较大的z-index值，确保在上层 */
		}
		.association-info-time{
			padding-left: 20px;
			 padding-right: 10px;
			 margin-bottom: 10px;
			font-size: 14px;
			width: 100%;
			height: 100%;
			position: absolute;
			 top: 85px; /* 根据需要设置上层图片的top值 */
			 left: 15px; /* 根据需要设置上层图片的left值 */
			z-index: 2; /* 设置为较大的z-index值，确保在上层 */
		}
	}
	
	
	.association-info-img{
		width: 30%;
		height: 130px;
		display: flex;
		flex-wrap: wrap;
		position: relative;
		.association-img-item-background{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1; /* 设置为较小的z-index值，确保在下层 */
		}
		.association-img-item{
			width: 83px; /* 根据需要设置上层图片的大小 */
			height: 90px; /* 根据需要设置上层图片的大小 */
			position: absolute;
			top: 23px; /* 根据需要设置上层图片的top值 */
			left: 14px; /* 根据需要设置上层图片的left值 */
			z-index: 2; /* 设置为较大的z-index值，确保在上层 */
		}
	}
	
	
}
.association-dazi{
	padding: 5px;
	background-color: white;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	font-size: 18px;
	font-family: 'Songti SC', '华文行楷', serif;
	.association-dazi-review-info{
		display: flex;
		margin-left: 5px;
		margin-top: 5px;
	}
	.association-dazi-apply{
		margin-right: 10px;
		padding: 5px 25px;
		border-radius: 20px;
		border: 1px solid;
		font-size: 25px;
		//从上到下渐变
		//background: linear-gradient(blue, pink);
		 
		//从左往右渐变
		background: linear-gradient(to right, #a1f814,#fadb0f );
		 
		//对角线渐变，从左上到右下
		//background: linear-gradient(to bottom right, blue, pink);
		 
		//70度渐变角度
		//background: linear-gradient(70deg, blue, pink);
		
	}
}
 .container {
    position: relative;
    height: 100%;
  }
  .publish_activities {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 300px;
      height: 50px;
      background-color: #07c5ff;
      color: white;
      text-align: center;
      line-height: 50px;
      border-radius: 25px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      z-index: 999;
	  font-size: 16px;
    }
</style>
